<template>
	<view class="auth">
		<view class="info-box">
			<view class="info-each">
				<view class="">任务分类</view>
				<view class="" @click="show = true">
					<text class="tint">{{cate}}</text>
					<image src="../../../static/right-img.png" mode=""></image>
				</view>
			</view>
			<view class="wire"></view>
			<view class="info-each">
				<view class="">项目标题</view>
				<view class="input">
					<input type="text" v-model="info.name" placeholder="请输入" />
				</view>
			</view>
			<view class="wire"></view>
			<view class="info-each">
				<view class="">平台名称</view>
				<view class="input">
					<input type="text" v-model="info.platform" placeholder="请输入" />
				</view>
			</view>
			<view class="wire"></view>
			<view class="info-each">
				<view class="">所需人数</view>
				<view class="input">
					<input type="text" v-model="info.num" :placeholder="`不少于${tasknum}人`" />
				</view>
			</view>
			<view class="wire"></view>
			<view class="info-each">
				<view class="">发布任务</view>
				<view class="">
					<u-radio-group v-model="taskType" placement="row">
						<u-radio activeColor="#FFCE54" label="积分" name="0" :customStyle="{marginRight: '20px'}">
						</u-radio>
						<u-radio activeColor="#FFCE54" label="佣金" name="1" :customStyle="{marginRight: '20px'}">
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="wire"></view>
			<view class="info-each">
				<!-- <view class="">积分</view> -->
				<view class="">佣金</view>
				<view class="input">
					<input type="text" v-model="info.price" :placeholder="`最低${taskprice}`" />
				</view>
			</view>
			<view class="wire"></view>
			<view class="info-each">
				<!-- <view class="">总积分</view> -->
				<view class="">总佣金</view>
				<view class="">{{toatl}}</view>
			</view>
			<view class="wire"></view>
			<view class="info-each">
				<view class="">手续费</view>
				<view class="">{{free}}</view>
			</view>
		</view>
		
		<view class="info-box">
			<view class="info-each">
				<view class="">做单时间</view>
				<view class="" @click="show1 = true">
					<text class="tint">{{tasktime}}</text>
					<image src="../../../static/right-img.png" mode=""></image>
				</view>
			</view>
			<view class="wire"></view>
			<view class="info-each">
				<view class="">审核时间</view>
				<view class="" @click="show2=true">
					<text class="tint">{{checktime}}</text>
					<image src="../../../static/right-img.png" mode=""></image>
				</view>
			</view>
			<view class="wire"></view>
			<view class="info-each">
				<view class="">设备</view>
				<view class="">
					<u-radio-group v-model="info.equiptype" placement="row">
						<u-radio activeColor="#FFCE54" label="全部" name="0" :customStyle="{marginRight: '20px'}">
						</u-radio>
						<u-radio activeColor="#FFCE54" label="安卓" name="1" :customStyle="{marginRight: '20px'}">
						</u-radio>
						<u-radio activeColor="#FFCE54" label="苹果" name="2" :customStyle="{marginRight: '20px'}">
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="wire"></view>
			<view class="info-each">
				<view class="">限制次数</view>
				<view class="" @click="show3 = true">
					<text class="tint">{{limit}}</text>
					<image src="../../../static/right-img.png" mode=""></image>
				</view>
			</view>
			<view class="wire"></view>
			<view class="info-each">
				<view class="">限制距离</view>
				<view class="input">
					<input v-model="info.distance" type="number" placeholder="请输入" />
					<text>公里</text>
				</view>
			</view>
		</view>
		
		

	
		<view class="info" style="margin-top: 20rpx;">
			<view class="line imgBox">
				<view class="l">任务说明：</view>
				<textarea v-model="info.content" class="r" placeholder="请输入任务说明" />
			</view>
		</view>

		<view class="titleBox">
			<view class="line"></view>
			<view class="title">任务步骤</view>
			<view class="add" @click="stepaddimage">增加图文步骤</view>
			<view class="add" @click="stepaddurl">增加网址步骤</view>
		</view>
		<template v-for="(item,index) of info.step">
			<view class="addBox" v-if="item.type === 0">
				<view class="l">
					<view class="step">{{index+1}}</view>
					<image src="https://www.stck.cc/my/delete.png" mode="" class="del"  @click="info.step.splice(index,1)"></image>
				</view>
				<view class="c" @click="selectImage(index)">
					<template v-if="item.image">
						<image :src="oss(item.image)" mode="aspectFill" class="upload"></image>
					</template>
					<template v-else>
						<image src="../../../static/task/add.png" class="icon" mode=""></image>
						<text class="word">上传图片</text>
					</template>

				</view>
				<view class="r">
					<textarea v-model="item.content" class="con" placeholder="请输入步骤说明" />
				</view>
			</view>
			<view class="addBox" v-if="item.type === 1">
				<view class="l">
					<view class="step">{{index+ 1}}</view>
					<image src="https://www.stck.cc/my/delete.png" mode="" class="del"  @click="info.step.splice(index,1)"></image>
				</view>
				<view class="r">
					<textarea v-model="item.content" class="con" placeholder="请输入上传说明(限制30字)" />
					<input type="text" v-model="item.url" class="inp" placeholder="请输入网站网址" />
				</view>
			</view>
		</template>
		<view class="titleBox">
			<view class="line"></view>
			<view class="title">上传验证</view>
			<view class="add"  @click="checkstepaddimage">增加收集截图</view>
			<view class="add" @click="checkstepaddurl">增加收集信息</view>
		</view>
		<template v-for="(item,index) of info.checkstep">
			<view class="addBox" v-if="item.type === 0">
				<view class="l">
					<view class="step">{{index+1}}</view>
					<image src="https://www.stck.cc/my/delete.png" mode="" class="del" @click="info.checkstep.splice(index,1)"></image>
				</view>
				<view class="c" @click="selectImage1(index)">
					<template v-if="item.image">
						<image :src="oss(item.image)" mode="aspectFill" class="upload"></image>
					</template>
					<template v-else>
						<image src="../../../static/task/add.png" class="icon" mode=""></image>
						<text class="word">上传图片</text>
					</template>
				
				</view>
				<view class="r">
					<textarea v-model="item.content" class="con" placeholder="请输入截图说明" />
				</view>
			</view>
			<view class="addBox" v-if="item.type === 1">
				<view class="l">
					<view class="step">{{index+1}}</view>
					<image src="https://www.stck.cc/my/delete.png" mode="" class="del" @click="info.checkstep.splice(index,1)"></image>
				</view>
				<view class="r">
					<textarea v-model="item.content" class="con" placeholder="请输入上传说明(限制30字)" />
				</view>
			</view>
		</template>
		
		<view class="agree">
			<view class="circle" @click="select = !select">
				<u-icon name="checkbox-mark" color="#FF8007" v-if="select"></u-icon>
			</view>
			<view class="other">我已阅读、理解并同意</view>
			<view class="rule" @click="article(4,'悬赏任务发布规则')">《悬赏任务发布规则》</view>
		</view>
		<view class="notice">温馨提示</view>
		<view class="notice" v-html="notice"></view>
		<view class="btn" @click="save">发布</view>
		<u-picker :show="show" :columns="columns" keyName="name" @confirm="confirm" @cancel="show = false"></u-picker>
		<u-picker :show="show1" :columns="timecolumns" keyName="name" @confirm="confirm1" @cancel="show1 = false">
		</u-picker>
		<u-picker :show="show2" :columns="timecolumns" keyName="name" @confirm="confirm2" @cancel="show2 = false">
		</u-picker>
		<u-picker :show="show3" :columns="limitcolumns" keyName="name" @confirm="confirm3" @cancel="show3 = false">
		</u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				notice: '',
				select: false,
				timecolumns: [
					[{
							name: '30分钟',
							num: 30
						},
						{
							name: '1小时',
							num: 60
						},
						{
							name: '3小时',
							num: 180
						},
						{
							name: '6小时',
							num: 360
						},
						{
							name: '12小时',
							num: 720
						},
						{
							name: '1天',
							num: 1440
						},
						{
							name: '2天',
							num: 2880
						},
						{
							name: '3天',
							num: 4320
						},
						{
							name: '5天',
							num: 7200
						},
						{
							name: '7天',
							num: 10080
						},
						{
							name: '15天',
							num: 21600
						},
						{
							name: '20天',
							num: 28800
						},
						{
							name: '30天',
							num: 43200
						}
					]
				],
				limitcolumns: [
					[{
							name: '每人一次',
							num: 0
						},
						{
							name: '每日一次',
							num: 1
						},
						{
							name: '每人三次',
							num: 2
						},
					]
				],
				limit: '每人一次',
				unit: '次',
				columns: [],
				show: false,
				show1: false,
				show2: false,
				show3: false,
				cate: '',

				tasknum: '',
				taskprice: '',
				checktime: '30分钟',
				tasktime: '30分钟',
				info: {
					name: '',
					platform: '',
					task_cate_id: '',
					num: '',
					price: '',
					total_price: '',
					tasknum: 30,
					checknum: 30,
					equiptype: '0',
					limittype: '',
					distance: '0',
					content: '',
					step: [{
						type: 0,
						image: '',
						content: ''
					}],
					checkstep: [{
						type: 0,
						image: '',
						content: ''
					}]
				},
				percent: '',
				taskType:'0'
			};
		},
		computed:{
			toatl() {
				return (this.info.price * this.info.num).toFixed(2) || '0.00'
			},
			free() {
				return (this.toatl * this.percent / 100).toFixed(2) || '0.00'
			}
		},
		onLoad(op) {
			this.taskType = op.type
			this.getInfo()
		},
		methods: {
			stepaddimage() {
				console.log(1)
				this.info.step.push({
					type: 0,
					image: '',
					content: ''
				})
			},
			stepaddurl() {
				console.log(2)
				this.info.step.push({
					type: 1,
					url: '',
					content: ''
				})
			},
			checkstepaddimage() {
				console.log(1)
				this.info.checkstep.push({
					type: 0,
					image: '',
					content: ''
				})
			},
			checkstepaddurl() {
				console.log(2)
				this.info.checkstep.push({
					type: 1,
					url: '',
					content: ''
				})
			},
			selectImage1(index) {
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						that.afterRead1(res.tempFilePaths[0], index)
					}
				});
			},
			// 新增图片
			async afterRead1(url, index) {
				const result = await this.uploadFilePromise(url)
			
				this.info.checkstep[index].image = result
			
			
			},
			selectImage(index) {
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						that.afterRead(res.tempFilePaths[0], index)
					}
				});
			},
			// 新增图片
			async afterRead(url, index) {
				console.log(url)
				const result = await this.uploadFilePromise(url)

				this.info.step[index].image = result


			},
			uploadFilePromise(url) {
				let that = this
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: that.Upload.uploadurl, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							type: 'image',
							token: uni.getStorageSync('token')
						},
						success: (res) => {
							let data = JSON.parse(res.data)
							if (res.statusCode === 200 && data.code === 1 && data.data) {
								resolve(data.data.url)
							} else {
								resolve()
							}
						}
					});
				})
			},
			save() {
				if(this.cate === ''){
					uni.$u.toast(`请选择分类`)
					return
				}
				if(this.info.name === ''){
					uni.$u.toast(`请输入项目标题`)
					return
				}
				if(this.info.platform === ''){
					uni.$u.toast(`请输入平台名称`)
					return
				}
				
				if(this.info.num < this.tasknum){
					uni.$u.toast(`人数最少不少于${this.tasknum}人`)
					return
				}
				if(Number(this.info.price )< Number(this.taskprice)){
					uni.$u.toast(`佣金最少不少于${this.taskprice}元`)
					return
				}
				if(this.tasktime === ''){
					uni.$u.toast(`请选择做单时间`)
					return
				}
				if(this.checktime === ''){
					uni.$u.toast(`请选择审核时间`)
					return
				}
				if(this.info.distance < 0){
					uni.$u.toast(`请输入正确的距离限制`)
					return
				}
				if(this.info.content === 0){
					uni.$u.toast(`请输入任务说明`)
					return
				}
				if(this.info.step.length < 0) {
					uni.$u.toast(`最少一个任步骤`)
					return
				}
				let finish = true
				for(let i = 0; i< this.info.step.length; i++){
					if(this.info.step[i].type == '0'){
						// if(this.info.step[i].image == ''){
						// 	uni.$u.toast('请上传步骤所需图片')
						// 	finish = false
						// 	break
						// }
						if(this.info.step[i].content == ''){
							uni.$u.toast('请上传步骤所需内容')
							finish = false
							break
						}
					}
					if(this.info.step[i].type == '1'){
						if(this.info.step[i].content == ''){
							uni.$u.toast('请上传步骤所需内容')
							finish = false
							break
						}
						if(this.info.step[i].url == ''){
							uni.$u.toast('请上传步骤所需网址')
							finish = false
							break
						}
					}
				}
				if(!finish) {
					return
				}
				if(this.info.checkstep.length < 0) {
					uni.$u.toast(`最少一个验证步骤`)
					return
				}
				let finish1 = true
				for(let i = 0; i< this.info.checkstep.length; i++){
					if(this.info.checkstep[i].type == '0'){
						// if(this.info.checkstep[i].image == ''){
						// 	uni.$u.toast('请上传步骤所需图片')
						// 	finish1 = false
						// 	break
						// }
						if(this.info.checkstep[i].content == ''){
							uni.$u.toast('请上传步骤所需内容')
							finish1 = false
							break
						}
					}
					if(this.info.checkstep[i].type == '1'){
						if(this.info.checkstep[i].content == ''){
							uni.$u.toast('请上传步骤所需内容')
							finish1 = false
							break
						}
					}
				}
				if(!finish1) {
					return
				}
				
				if (!this.select) {
					uni.$u.toast('请先同意《悬赏任务发布规则》');
					return
				}
				this.info.total_price = this.toatl
				// let step = JSON.stringify(this.info.step)
				// let checkstep = JSON.stringify(this.info.step)
				uni.$u.http.post('/posttask',{
					type: 'post',
					pay_type:this.taskType == 0 ? 'score' : 'money',
					...this.info,
					// step,
					// checkstep
				}).then(res => {
					if (res.code == 1) {
						// uni.$u.toast(res.msg)
						uni.$u.route({
							type: 'redirect',
							url: 'pages/common/success'
						})
					}
				}).catch((res) => {
				if (res.code == 3) {
					uni.$u.toast(res.msg)
					setTimeout(() => {
						uni.$u.route({
							url: 'pages/my/info'
						})
					},1000)
					
				}
				})
			},
			confirm1(e) {
				console.log(e)
				this.tasktime = e.value[0].name
				this.info.tasknum = e.value[0].num
				this.show1 = false
			},
			confirm2(e) {
				console.log(e)
				this.checktime = e.value[0].name
				this.info.checknum = e.value[0].num
				this.show2 = false
			},
			confirm3(e) {
				console.log(e)
				this.limit = e.value[0].name
				this.info.limittype = e.value[0].num
				this.show3 = false
			},
			confirm(e) {
				console.log(e)
				this.cate = e.value[0].name
				this.info.task_cate_id = e.value[0].id
				this.tasknum = e.value[0].tasknum
				this.taskprice = e.value[0].taskprice
				this.show = false
			},
			getInfo() {
				uni.$u.http.post('/posttask').then(res => {
					if (res.code == 1) {
						this.columns = [
							res.data.cateList
						]
						this.percent = res.data.percent
						this.cate = res.data.cateList[0].name
						this.info.task_cate_id = res.data.cateList[0].id
						this.tasknum = res.data.cateList[0].tasknum
						this.taskprice = res.data.cateList[0].taskprice
					}
				}).catch((res) => {

				})
				uni.$u.http.post('/getconfig', {
					type: 10
				}).then(res => {
					if (res.code == 1) {
						res.data.config = res.data.config.replace(/<img/g,
							"<img style='max-width:100%;height:auto'")
						this.notice = res.data.config
				
					}
				}).catch((res) => {
				
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	page {
		background: #F6F6F6;
	}

	.auth {
		.info-box {
			width: 622rpx;
			padding: 29rpx 32rpx;
			background: #ffffff;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			margin: auto;
			margin-top: 24rpx;
		
			.info-each {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
		
				.input {
					display: flex;
					align-items: center;
					text-align: right;
					font-size: 30rpx;
					font-weight: 500;
					color: #333333;
		
					text {
						display: inline-block;
						padding-left: 30rpx;
					}
				}
		
				image {
					width: 32rpx;
					height: 32rpx;
					position: relative;
					top: 7rpx;
					left: 20rpx;
				}
				.tint {
					font-size: 30rpx;
					font-weight: 500;
					// color: #999999;
				}
			}
			.upimg {
				margin-top: 30rpx;
			}
		
			.wire {
				width: 622rpx;
				height: 1rpx;
				background-color: #f0f0f0;
				margin: auto;
				margin: 30rpx 0;
			}
		
			.tags-box {
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
				.tags {
					display: flex;
					margin-top: 24rpx;
					.tag {
						background-color: #f6f6f6;
						font-size: 30rpx;
						padding: 19rpx 48rpx 19rpx 24rpx;
						font-weight: 500;
						color: #333333;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						margin-right: 24rpx;
						image {
							width: 30rpx;
							height: 30rpx;
							position: relative;
							top: 7rpx;
							left: 20rpx;
						}
					}
				}
			}
		}
		
		// background: linear-gradient(to bottom, #FFC141, #F6F6F6);
		// background-size: 750rpx 500rpx;
		// background-repeat: no-repeat;
		// padding-top: 50rpx;

		.btn {
			background: linear-gradient(to right, #FFDF41, #FFC141);
			height: 88rpx;
			border: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 50rpx auto 0;
			width: 590rpx;
			border-radius: 44rpx;
		}

		.agree {
			display: flex;
			align-items: center;
			padding: 30rpx 20rpx 20rpx;

			.circle {
				width: 30rpx;
				height: 30rpx;
				box-sizing: border-box;
				border-radius: 50%;
				border: 1px solid #999999;
				margin-right: 10rpx;
			}

			.select {
				width: 22rpx;
				height: 22rpx;
			}

			.other {
				font-size: 22rpx;
				color: #999999;
			}

			.rule {
				font-size: 22rpx;
				color: #FF8007;
			}
		}

		.notice {
			font-size: 22rpx;
			color: #FF8007;
			padding: 0 20rpx;
		}

		.addBox {
			margin: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			display: flex;
			align-items: flex-start;
			padding: 20rpx 20rpx 20rpx 0;

			.l {
				display: flex;
				flex-direction: column;
				align-items: center;
				flex-shrink: 0;
				margin-right: 20rpx;

				.step {
					background: linear-gradient(to bottom, #FFC141, #FFDF41);
					height: 52rpx;
					width: 94rpx;
					border-radius: 0 26rpx 26rpx 0;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #191615;
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 30rpx;
				}

				.del {
					width: 29rpx;
					height: 29rpx;
				}
			}

			.c {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				height: 170rpx;
				width: 170rpx;
				border: 1px solid #FFCE54;
				border-radius: 20rpx;
				flex-shrink: 0;
				margin-right: 20rpx;

				.icon {
					width: 51rpx;
					height: 49rpx;
				}

				.word {
					color: #FF8007;
					font-size: 30rpx;
					margin-top: 20rpx;
				}

				.upload {
					height: 160rpx;
					width: 160rpx;
					border-radius: 20rpx;
				}
			}

			.r {
				flex: 1;

				.con {
					height: 130rpx;
					border: 1px solid #F6F6F6;
					width: 350rpx;
					border-radius: 10rpx;
					padding: 20rpx;
				}

				.inp {
					border: 1px solid #F6F6F6;
					height: 66rpx;
					margin-top: 20rpx;
					width: 350rpx;
					border-radius: 10rpx;
					padding: 0 20rpx;
				}
			}
		}

		.titleBox {
			display: flex;
			align-items: center;
			padding: 20rpx 20rpx 10rpx;

			.line {
				width: 9rpx;
				height: 35rpx;
				background: linear-gradient(to right, #FFC141, #FFDF41);
				border-radius: 0 9rpx 9rpx 0;
				margin-right: 10rpx;
			}

			.title {
				flex: 1;
				font-size: 32rpx;
				color: #191615;
				font-weight: bold;
			}

			.add {
				height: 60rpx;
				border-radius: 10rpx;
				margin-left: 20rpx;
				display: flex;
				align-items: center;
				color: #FF8007;
				font-size: 24rpx;
				padding: 0 20rpx;
				background: #FFFAE5;
			}
		}

		.info {
			background: #FFFFFF;
			margin: 0 20rpx;
			border-radius: 20rpx;
			padding: 0 20rpx 20rpx;

			.notice {
				font-size: 24rpx;
				color: #999999;
				padding-left: 20rpx;
				padding-top: 20rpx;
			}

			.line {
				height: 100rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #F6F6F6;

				.l {
					color: #575859;
					font-size: 32rpx;
					width: 180rpx;
					text-align: right;
				}

				.r {
					flex: 1;
					height: 100%;
				}
			}

			.imgBox {
				height: 200rpx;
				align-items: flex-start;
				padding: 20rpx 0;
				justify-content: flex-start;
				position: relative;

				.address {
					position: absolute;
					width: 30rpx;
					height: 40rpx;
					right: 30rpx;
					bottom: 30rpx;
				}
			}

			.box {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				height: 170rpx;
				width: 170rpx;
				border: 1px solid #FFCE54;
				border-radius: 20rpx;

				.icon {
					width: 51rpx;
					height: 49rpx;
				}

				.word {
					color: #FF8007;
					font-size: 30rpx;
					margin-top: 20rpx;
				}
			}
		}
	}
</style>
